<template>
  <div>
    <!-- 面包屑 -->
    <Bread>
      <BreadItem to="'/'" @click="$router.push('/indexView')">首页</BreadItem>
      <BreadItem to="'/'" @click="$router.push('/cart')">购物车</BreadItem>
      <BreadItem>填写订单</BreadItem>
    </Bread>
    <!-- 收货地址 -->
    <Address
      :defaultIdx="defaultIdx"
      @setDefaultIndex="setDefaultIndex"
      :address="address"
      @getAddressList="getAddressList"
    ></Address>
    <!-- 商品信息 -->
    <GoodsInformation></GoodsInformation>
    <!-- 配送时间 -->
    <h3 class="box-title">配送时间</h3>
    <div class="box-body">
      <a
        class="my-btn"
        href="javascript:;"
        :class="{ active: deliveryTimeType == 1 }"
        @click="deliveryTimeType = 1"
        >不限送货时间：周一至周日</a
      >
      <a
        class="my-btn"
        href="javascript:;"
        :class="{ active: deliveryTimeType == 2 }"
        @click="deliveryTimeType = 2"
        >工作日送货：周一至周五</a
      >
      <a
        class="my-btn"
        href="javascript:;"
        :class="{ active: deliveryTimeType == 3 }"
        @click="deliveryTimeType = 3"
        >双休日、假日送货：周六至周日</a
      >
    </div>
    <!-- 支付方式 -->
    <h3 class="box-title">支付方式</h3>
    <div class="box-body">
      <a
        class="my-btn"
        href="javascript:;"
        :class="{ active: payType == 1 }"
        @click="payType = 1"
        >在线支付</a
      >
      <a
        class="my-btn"
        href="javascript:;"
        :class="{ active: payType == 2 }"
        @click="payType = 2"
        >货到付款</a
      >
      <span style="color: #999">货到付款需付5元手续费</span>
    </div>
    <!-- 金额明细 -->
    <h3 class="box-title">金额明细</h3>
    <div class="box-body">
      <div class="total">
        <dl>
          <dt>商品件数：</dt>
          <dd>{{ goodsNum }}件</dd>
        </dl>
        <dl>
          <dt>商品总价：</dt>
          <dd>¥{{ totalPrice }}</dd>
        </dl>
        <dl>
          <dt>运<i></i>费：</dt>
          <dd>¥0.00</dd>
        </dl>
        <dl>
          <dt>应付总额：</dt>
          <dd class="price">¥{{ totalPrice }}</dd>
        </dl>
      </div>
    </div>
    <!-- 提交订单 -->
    <div class="submit">
      <button class="submitBtn" @click="SubmitOrder">提交订单</button>
    </div>
  </div>
</template>

<script>
// 引入面包屑
import Bread from "../utils/Bread.vue";
import BreadItem from "../utils/BreadItem.vue";
// 收货地址
import Address from "@/components/Settle/Address.vue";
import GoodsInformation from "@/components/Settle/GoodsInformation.vue";
// 引入dialog对话框
import Dialog from "@/components/utils/Dialog/Dialog.vue";
// 引入获取地址的api
import { getAddress } from "@/utils/Api/SettleApi";
// 引入提交订单
import { submitOrder } from "@/utils/Api/SettleApi";
export default {
  components: {
    Bread,
    BreadItem,
    Address,
    GoodsInformation,
    Dialog,
  },
  data() {
    return {
      // 默认地址的下标
      defaultIdx: 0,
      // 收货地址数据
      address: [],
      //配送时间类型，1为不限，2为工作日，3为双休或假日
      deliveryTimeType: 1,
      //支付方式，1为在线支付，2为货到付款
      payType: 1,
    };
  },
  mounted() {
    this.getAddressList();
  },
  computed: {
    // 商品数量
    goodsNum() {
      let sum = 0;
      this.$store.state.Cart.list.forEach((item) => {
        if (item.selected) {
          sum += item.count;
        }
      });
      return sum;
    },
    // 商品总价
    totalPrice() {
      let sum = 0;
      this.$store.state.Cart.list.forEach((item) => {
        if (item.selected) {
          sum += item.count * item.price;
        }
      });
      return sum;
    },
  },
  methods: {
    // 修改默认地址id
    setDefaultIndex(idx) {
      this.defaultIdx = idx;
    },
    // 提交订单
    async SubmitOrder() {
      // 获取id
      let goods = this.$store.state.Cart.list.map((item) => {
        if (item.selected) {
          return { skuId: item.skuId, count: item.count };
        }
      });
      //收货地址的id
      let addressId = this.address[this.defaultIdx].id;
      let obj = {
        goods,
        addressId,
        deliveryTimeType: this.deliveryTimeType,
        payType: this.payType,
        payChannel: 1,
        buyerMessage: "玛卡巴卡",
      };
      //调用接口
      let { data } = await submitOrder(obj);
      if (data.msg == "操作成功") {
        this.$message({
          text: "提交订单成功",
          type: "success",
        });
        console.log(data);
        this.$router.push("/member/orderPay?id=" + data.result.id);
      }
    },
    // 获取收货地址数据
    async getAddressList() {
      let { data } = await getAddress();
      this.address = data.result;
    },
  },
};
</script>

<style lang="scss">
.submitBtn {
  border-color: #27ba9b;
  background: #27ba9b;
  color: #fff;
  width: 180px;
  height: 50px;
  font-size: 16px;
  outline: none;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
}
.box-title {
  font-size: 16px;
  font-weight: normal;
  padding-left: 10px;
  line-height: 70px;
  border-bottom: 1px solid #f5f5f5;
  background-color: white;
}
.box-body {
  padding: 20px 0;
  background-color: white;
}
.xtx-pay-checkout-page {
  .wrapper {
    background: #fff;
    padding: 0 20px;
    .box-title {
      font-size: 16px;
      font-weight: normal;
      padding-left: 10px;
      line-height: 70px;
      border-bottom: 1px solid #f5f5f5;
    }
    .box-body {
      padding: 20px 0;
    }
  }
}
.address {
  border: 1px solid #f5f5f5;
  display: flex;
  align-items: center;
  .text {
    flex: 1;
    min-height: 90px;
    display: flex;
    align-items: center;
    .none {
      line-height: 90px;
      color: #999;
      text-align: center;
      width: 100%;
    }
    > ul {
      flex: 1;
      padding: 20px;
      li {
        line-height: 30px;
        span {
          color: #999;
          margin-right: 5px;
          > i {
            width: 0.5em;
            display: inline-block;
          }
        }
      }
    }
    > a {
      color: #27bb9a;
      width: 160px;
      text-align: center;
      height: 90px;
      line-height: 90px;
      border-right: 1px solid #f5f5f5;
    }
  }
  .action {
    width: 420px;
    text-align: center;
    .btn {
      width: 140px;
      height: 46px;
      line-height: 44px;
      font-size: 14px;
      &:first-child {
        margin-right: 10px;
      }
    }
  }
}
.goods {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  .info {
    display: flex;
    text-align: left;
    img {
      width: 70px;
      height: 70px;
      margin-right: 20px;
    }
    .right {
      line-height: 24px;
      p {
        &:last-child {
          color: #999;
        }
      }
    }
  }
  tr {
    th {
      background: #f5f5f5;
      font-weight: normal;
    }
    td,
    th {
      text-align: center;
      padding: 20px;
      border-bottom: 1px solid #f5f5f5;
      &:first-child {
        border-left: 1px solid #f5f5f5;
      }
      &:last-child {
        border-right: 1px solid #f5f5f5;
      }
    }
  }
}
.my-btn {
  width: 228px;
  height: 50px;
  border: 1px solid #e4e4e4;
  text-align: center;
  line-height: 48px;
  margin-right: 25px;
  color: #666666;
  display: inline-block;
  &.active,
  &:hover {
    border-color: #27bb9a;
  }
}
.total {
  dl {
    display: flex;
    justify-content: flex-end;
    line-height: 50px;
    dt {
      i {
        display: inline-block;
        width: 2em;
      }
    }
    dd {
      width: 240px;
      text-align: right;
      padding-right: 70px;
      &.price {
        font-size: 20px;
        color: red;
      }
    }
  }
}
.submit {
  text-align: right;
  padding: 60px;
  border-top: 1px solid #f5f5f5;
}
</style>
